<template>
  <div style="padding: 0px 10px;">
    <div style="display: flex;">
      <div style="">
        <el-tabs v-model="type" @tab-click="handleTabClick">
          <el-tab-pane label="待报价" name="pricing"></el-tab-pane>
          <el-tab-pane label="待发货" name="deliver"></el-tab-pane>
          <el-tab-pane label="已发货" name="done"></el-tab-pane>
          <el-tab-pane label="退换货" name="cancel" v-if="false"></el-tab-pane>
        </el-tabs>
      </div>
    </div>

    <!--报价-->
    <div v-if="type=='pricing'">
      <el-empty v-if="tableData.length<=0" :size="12" ></el-empty>
      <el-card v-for="(item,index) in tableData" :key="index">
        <el-form>
          <el-row>
            <el-col :span="12">
              <el-form-item label="订单号码:">{{item.ordercode}}</el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="订单日期:">{{item.orderdate}}</el-form-item>
            </el-col>
            <el-col>
              <el-form-item label="清单明细:">
                <el-table border :data="item.goods">
                  <el-table-column label="序号" type="index"></el-table-column>
                  <el-table-column label="产品名称" prop="title"></el-table-column>
                  <el-table-column label="单位" prop="unit" width="50px" align="center"></el-table-column>
                  <el-table-column label="数量" prop="count" width="50px" align="center">
                    <template v-slot="scope">
                      <span style="color: #F00; font-weight: bold;font-size: 14px;">{{scope.row.count}}</span>
                    </template>
                  </el-table-column>
                </el-table>
              </el-form-item>
            </el-col>

            <el-col>
              <el-form-item label="收货地址:">
                {{item.buyerinfo.buyer}} {{item.buyerinfo.mobile}} {{item.buyerinfo.address}}
                <i class="el-icon-document-copy"
                  style="margin-left:15px;color: #0055ff; font-weight: bold; font-size: 14px; cursor: pointer;"
                  @click="copyText(item.buyerinfo.buyer+' '+item.buyerinfo.mobile+' '+item.buyerinfo.address)">复制</i>
              </el-form-item>
            </el-col>


            <el-col>
              <el-form-item label="运费">
                <div style="display: flex;">
                  <el-input :disabled="!item.isEdit" v-model="item.factoryfee" style="width: 120px;"></el-input>
                  <el-button type="primary" @click="handleSaveFactoryFee(index,item)">{{item.isEdit? '保存运费':'编辑运费'}}</el-button>
                </div>
              </el-form-item>
            </el-col>

          </el-row>
        </el-form>
      </el-card>
    </div>

    <!--待发货-->

    <div v-if="type=='deliver'|| type=='done'">
      <el-card v-for="(item,index) in tableData" :key="index">
        <el-form>
          <el-row>
            <el-col :span="12">
              <el-form-item label="订单号码:">{{item.reqcode}}</el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="订单日期:">{{item.reqdate}}</el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="物流方式:">{{item.yunfei}}</el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="订单总额:">
                <span style="font-weight: bolder">{{parseFloat(item.sum).toFixed(2)}}元 </span>
                <span v-if="item.paidstatus==0" style="color: #ff0000; font-weight: bold;">（ 待付款 ）</span>
                <span v-if="item.paidstatus==1" style="color: #00aa00; font-weight: bold;">（ 已付款 ）</span>
              </el-form-item>
            </el-col>
            <el-col>
              <el-form-item label="清单明细:">
                <el-table border :data="item.goods">
                  <el-table-column label="序号" type="index"></el-table-column>
                  <el-table-column label="产品名称" prop="title"></el-table-column>
                  <el-table-column label="单位" prop="unit" width="50px" align="center"></el-table-column>
                  <el-table-column label="数量" prop="count" width="50px" align="center">
                    <template v-slot="scope">
                      <span style="color: #F00; font-weight: bold;font-size: 14px;">{{scope.row.count}}</span>
                    </template>
                  </el-table-column>
                  <el-table-column label="单价" prop="price" width="100px" align="center"></el-table-column>
                  <el-table-column label="总价" prop="total" width="120px" align="center"></el-table-column>
                </el-table>
              </el-form-item>
            </el-col>

            <el-col>
              <el-form-item label="收货地址:">
                {{item.receiverinfo}}
                <i class="el-icon-document-copy"
                  style="margin-left:15px;color: #0055ff; font-weight: bold; font-size: 14px; cursor: pointer;"
                  @click="copyText(item.receiverinfo)">复制</i>
              </el-form-item>
            </el-col>


            <el-col>
              <el-form-item label="物流信息:">
                <div style="display: flex;">
                  <div style="margin-right:5px;">
                    <el-select v-model="item.deliver.name" :disabled="!item.isEdit" placeholder="物流公司" clearable allow-create filterable>
                      <el-option label="韵达快运" value="韵达快运"></el-option>
                      <el-option label="韵达快递" value="韵达快递"></el-option>
                      <el-option label="京东快递" value="京东快递"></el-option>
                      <el-option label="德邦快递" value="德邦快递"></el-option>
                      <el-option label="顺丰快递" value="顺丰快递"></el-option>
                    </el-select>
                  </div>
                  <div style="margin-right:5px; width: 200px;">
                    <el-input placeholder="物流单号" :disabled="!item.isEdit" v-model="item.deliver.num"></el-input>
                  </div>
                  <el-button type="primary" @click="handleSaveDeliver(index,item)">{{item.isEdit? '保存物流信息':'编辑物流信息'}}</el-button>
                </div>
              </el-form-item>
            </el-col>

          </el-row>
        </el-form>
      </el-card>
    </div>





  </div>
</template>

<script>
  export default {
    data() {
      return {
        type: 'pricing',
        tableData: [],
      }
    },
    mounted() {
      tableData: [],
      this.loadDataList();
    },
    methods: {
      handleSaveFactoryFee(index, item) {
        if (item.isEdit) {
          let params = {
            ouid: item.ouid,
            factoryfee: item.factoryfee
          };
          this.axios.post("api/admin/shareorder/setfactoryfee", params).then((res) => {
            if (res.status == 200 && res.data.code == 1) {
              item.isEdit = false;
              this.$message.success("保存成功!")
            }
          });


          console.log("保存");
        }
        item.isEdit = !item.isEdit;
      },
      handleSaveDeliver(index, item) {
        if (item.isEdit) {
          let params = {
            reqcode: item.reqcode,
            name: item.deliver.name,
            num: item.deliver.num
          };
          this.axios.post("api/admin/shareorder/setdeliver", params).then((res) => {
            if (res.status == 200 && res.data.code == 1) {
              this.$message.success("保存成功!")
              this.loadDataList();
            }
          });
        }
         item.isEdit = !item.isEdit;
      },
      copyText(txt) {
        if (txt == "") {

          return;
        }
        const el = document.createElement('textarea');
        // 将需要复制的文本内容赋值给 textarea 元素。
        el.value = txt;
        //将 textarea 元素添加到页面中。
        document.body.appendChild(el);
        //选中 textarea 元素中的文本。
        el.select();
        // 执行复制命令，将选中的文本复制到剪贴板
        document.execCommand('copy');
        //从页面中移除 textarea 元素。
        document.body.removeChild(el);
        //弹出提示框，告知用户文本已复制成功。
        this.$message.success("文本已复制");
      },
      loadDataList() {
        let params = {
          type: this.type
        };
        this.axios.post("api/admin/shareorder/list", params).then((res) => {
          if (res.status == 200 && res.data.code == 1) {
            this.tableData = res.data.list;
          }
        });
      },
      handleTabClick(tab, event) {
        this.type = tab.name;
        this.tableData = [];
        this.loadDataList()
      },
      handleFresh() {

      }
    }
  }
</script>

<style scoped>
  .tabItem {
    text-align: center;
  }
</style>
